<template>
  <view class="center">
    <view class="bg center">
      <!-- <text class="compnay">安能日历</text> -->
      <view class="banner">
        <image src="../../static/work/work.png"></image>
      </view>
    </view>
    <view class="center-nav margin-top">
      <view class="center-nav-content">
        <view class="center-nav-item" v-for="(nav,index) in navs">
          <image :src="'../../static/work/'+nav.icon+'.png'" @click="clickGongneng(nav)"></image>
          <text class="center-nav-item-text">{{nav.text}}</text>
        </view>
      </view>
    </view>

    <view class="center-list">
      <view class="center-nav-title">
        <text>实用日历</text>
      </view>
      <view class="center-list-content">
        <view class="center-content-item" v-for="(nav,index) in rili">
          <!-- <text class="center-content-item-icon" :class="nav.class"> {{ nav.icon  }}  </text> -->
          <view @click="clickBannerItem(nav.path)">
            <text class="center-content-item-icon" :class="nav.class"> {{ nav.icon  }} </text>
            <view class="center-content-item-info">
              <text class="center-content-item-text">{{nav.text}}</text>
              <text class="center-content-item-desc">{{nav.desc}}</text>
            </view>
          </view>

        </view>
      </view>
    </view>

    <view class="center-list">
      <view class="center-nav-title">
        <text>八字测字</text>
      </view>
      <view class="center-list-content">
        <view class="center-content-item" v-for="(nav,index) in cezi">
          <view @click="clickBannerItem(nav.path)">
            <text class="center-content-item-icon" :class="nav.class"> {{ nav.icon  }} </text>
            <view class="center-content-item-info">
              <text class="center-content-item-text">{{nav.text}}</text>
              <text class="center-content-item-desc">{{nav.desc}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- <u-popup :round="10" :show="show" mode="center">
      <view class="progressBox">
        <u-loading-icon size="36"></u-loading-icon>
        <text class="words">下载中 请勿退出 {{percentVal}}%</text>
      </view>
    </u-popup> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      navs: [
        {
          icon: "icon1",
          text: "版本更新",
        },
        {
          icon: "icon2",
          text: "应用管理",
        },
        {
          icon: "icon3",
          text: "联系作者",
        },
        {
          icon: "icon4",
          text: "我的信息",
        },
      ],
      rili: [
        {
          icon: "\u{e600}",
          text: "万年历",
          desc: "阳历阴历节气",
          class: "color-2",
          path: "/index/index",
        },
        {
          icon: "\u{e67a}",
          text: "老黄历",
          desc: "每日吉凶宜忌",
          class: "color-3",
          path: "/almanac/almanac",
        },
        {
          icon: "\u{e619}",
          text: "道历",
          desc: "道教文化",
          class: "color-4",
          path: "/work/dao/index",
        },
        {
          icon: "\u{e627}", //原代码：&#xe60a;
          text: "佛历",
          desc: "佛教文化",
          class: "color-1",
          path: "/work/fo/index",
        },
        {
          icon: "\u{e691}",
          text: "法定假日",
          desc: "当年法定假日",
          class: "color-5",
          path: "/holiday/holiday",
        },
      ],
      cezi: [
        {
          icon: "\u{e603}",
          text: "八字",
          desc: "精准定位考勤签到",
          class: "color-2",
          path: "/work/bazi/index",
        },
        {
          icon: "\u{e69e}",
          text: "星座",
          desc: "一键批量处理",
          class: "color-3",
          path: "",
        },
      ],
      show: false,
      //下载进度条
      percentVal: 0,
    };
  },
  methods: {
    goLogin() {
      if (!this.login) {
        console.log("点击前往登录");
      }
    },

    clickBannerItem(path) {
      if (!path) {
        uni.showToast({
          title: "敬请期待",
          icon: "none",
        });
        return;
      }
      if (path == "/index/index" || path == "/almanac/almanac") {
        uni.switchTab({
          url: "/pages" + path,
        });
      } else {
        uni.navigateTo({
          url: "/pages" + path,
        });
      }
    },
    clickGongneng(nar) {
      console.log("--", nar);
      if (nar.text == "版本更新-") {
      } else {
        uni.showToast({
          title: "敬请期待",
          icon: "none",
        });
        return;
      }
    },
    //更新程序
    AndroidUpdate() {
      console.log("更新--");
      const _this = this;
      uni.showModal({
        title: "版本更新",
        content: "APP有新版本发布，点击 立即更新 进行最新版本下载。",
        confirmText: "立即更新",
        cancelText: "稍后进行",
        success: function (res) {
          if (res.confirm) {
            _this.show = true; // show变量控制一个下载进度弹框（这个UI样式自己写即可）
            // 创建一个下载任务，并根据后端返回的apk静态资源地址filePath进行下载
            var dtask = plus.downloader.createDownload(
              _this.filePath,
              {},
              function (d, status) {
                // 下载完成
                if (status == 200) {
                  _this.show = false; // 下载完成再把下载进度弹框关闭即可
                  plus.runtime.install(
                    plus.io.convertLocalFileSystemURL(d.filename),
                    {},
                    {},
                    function (error) {
                      uni.showToast({
                        title: "安装失败",
                        duration: 1500,
                      });
                    }
                  );
                } else {
                  uni.showToast({
                    title: "更新失败",
                    duration: 1500,
                  });
                }
              }
            );
            dtask.start(); // 下载任务开始下载
            // 关于进度的获取是使用定时器不断获取已经下载的文件的大小，再对比总大小即可
            let timer = setInterval(() => {
              let percent = (
                dtask.downloadedSize /
                _this.fileSize /
                1024
              ).toFixed(2); // fileSize文件总大小，后端返回的
              _this.percentVal = Math.floor(percent * 100); // 转成整数展示
              console.log(dtask.downloadedSize, "baife---", percent);
              if (percent >= 1) {
                // 注意百分比，及时清除定时器即可
                clearInterval(timer);
              }
            }, 18);
          } else if (res.cancel) {
            console.log("稍后更新");
          }
        },
      });
    },
  },
};
</script>

<style>
@font-face {
  font-family: texticons;
  font-weight: normal;
  font-style: normal;
  src: url("https://at.alicdn.com/t/c/font_4670004_a9ch2z4933.ttf?t=1725101892529")
    format("truetype");
}

page,
view {
  display: flex;
}

page {
  background-color: #fff;
}

.center {
  flex-direction: column;
}
</style>
<style lang="scss" scoped>
$head-color: #5b8cff; //5b8cff 4194fc
$white-color: #fff;
$radius: 5rpx;
$border-color: #efefef;
$color-1: #6eacfe;
$color-2: #52f0cf;
$color-3: #ffcd46;
$color-4: #ff727d;
$list-item-height: 100rpx;
$list-margin: 15rpx;
.bg {
  background-image: linear-gradient(#5b8cff, #4194fc);
  min-height: 450rpx;
  border-bottom-left-radius: 30%;
  border-bottom-right-radius: 30%;

  .compnay {
    width: calc(100vw - 80rpx);
    margin: 0 auto 30rpx;
    font-size: 38rpx;
    color: #fff;
    font-weight: 400;
    text-align: center;
  }
  .banner {
    width: 100vw;
    height: 270rpx;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;

    image {
      width: calc(100vw - 80rpx);
      margin: 0 auto;
      height: 270rpx;
      border-radius: 20rpx;
    }
  }
}
.center-list {
  background-color: #ffffff;
  margin: 0 auto 0;
  padding-bottom: $list-margin;
  width: calc(100vw - 0rpx);
  flex-direction: column;
  border-radius: $radius;
}
.center-nav {
  background-color: #ffffff;
  margin: 0rpx auto 50rpx;
  width: calc(100vw - 80rpx);
  flex-direction: column;
  border-radius: $radius;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
}
.center-nav-title {
  padding: 25rpx 40rpx 0rpx;
  font-size: 34rpx;
  color: #333;
  font-weight: 400;
}
.center-nav-content {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  .center-nav-item {
    flex-direction: column;
    flex: 1;
    text-align: center;
    image {
      width: 104rpx;
      height: 105rpx;
      margin: 0 auto;
    }
    .center-nav-item-icon {
      color: #333;
      font-size: 48rpx;
      font-weight: 500;
      font-family: texticons;
    }
    .center-nav-item-text {
      color: #666;
      font-size: 30rpx;
      font-weight: 400;
      margin-top: 5rpx;
    }
  }
}
.center-list-content {
  box-sizing: border-box;
  padding: 25rpx 40rpx;
  flex-wrap: wrap;
  .center-content-item {
    width: 50%;
    box-sizing: border-box;
    padding: 25rpx 0rpx;
    align-items: center;
    .center-content-item-icon {
      color: #fff;
      font-size: 48rpx;
      font-weight: 500;
      font-family: texticons;
      border-radius: 20rpx;
      padding: 20rpx;
    }
    .center-content-item-info {
      flex-direction: column;
      margin-left: 20rpx;
      .center-content-item-text {
        color: #666;
        font-size: 32rpx;
        font-weight: 400;
      }
      .center-content-item-desc {
        color: #888;
        font-size: 24rpx;
        font-weight: 400;
        margin-top: 10rpx;
      }
    }
  }
}
.margin-top {
  margin-top: -160rpx;
}
.color-1 {
  background-image: linear-gradient(#72aefe, #4896ff);
}
.color-2 {
  background-image: linear-gradient(#7bf95f, #39debd);
}
.color-3 {
  background-image: linear-gradient(#ffd155, #ffbc04);
}
.color-4 {
  background-image: linear-gradient(#ff808b, #ff6872);
}
.color-5 {
  background-image: linear-gradient(#df52c8, #de3cd3);
}
</style>